<template>
  <el-row>
    <el-col :span="24">
      <Portlet title="仓库异常">
        <el-form ref="searchForm" class="el-form-col el-form-s" :model="search">
          <el-row :gutter="15">
            <el-col :lg="4" :md="6">
              <el-form-item prop="abnormalSerNo">
                <el-input v-model="search.abnormalSerNo" clearable placeholder="异常流水号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="abnormalCode">
                <el-select v-model="search.abnormalCode" placeholder="请选择异常类型">
                  <el-option v-for="item in abnormalArr"
                             :key="item.value"
                             :label="item.text"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="locationName">
                <el-input v-model="search.locationName"  placeholder="库位"></el-input>
              </el-form-item>
              <!--<el-form-item label="创建时间:" prop="foundStartDate">-->
                <!--<el-date-picker type="date"-->
                                <!--placeholder="选择开始时间:天"-->
                                <!--v-model="search.foundStartDate"-->
                                <!--value-format="yyyy-MM-dd"-->
                                <!--style="width: 100%;"></el-date-picker>-->
              <!--</el-form-item>-->
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-lg-only hidden-xl-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="info" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields('searchForm')" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="cargoOwnerName">
                <el-input v-model="search.cargoOwnerName" clearable placeholder="商家名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="manuName">
                <el-input v-model="search.manuName" clearable placeholder="厂家名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-md-only hidden-sm-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="info" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields('searchForm')" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="belongProduct">
                <el-input v-model="search.belongProduct" clearable placeholder="所属产品"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="packNo">
                <el-input v-model="search.packNo" clearable placeholder="包件编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="packName">
                <el-input v-model="search.packName" clearable placeholder="包件名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item  prop="startfoundDate">
                <el-date-picker type="date"
                                placeholder="发起开始时间"
                                value-format="yyyy-MM-dd"
                                v-model="search.startfoundDate" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="endfoundDate">
                <el-date-picker type="date"
                                placeholder="发起结束时间"
                                v-model="search.endfoundDate"
                                value-format="yyyy-MM-dd"
                                :picker-options="{disabledDate}" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="founderName">
                <el-input v-model="search.founderName" placeholder="发起人"></el-input>
              </el-form-item>
            </el-col>
            <div v-if="isOpen">
              <template  v-if="abnormalState == '1'">
                <el-col :lg="4" :md="6">
                  <el-form-item prop="followUserName">
                    <el-input v-model="search.followUserName" placeholder="跟进人"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="4" :md="6">
                  <el-form-item prop="followType">
                    <el-select v-model="search.followType" placeholder="请选择跟进内容">
                      <el-option v-for="item in followTypeArr"
                                 :key="item.value"
                                 :label="item.text"
                                 :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :lg="4" :md="6">
                  <el-form-item  prop="startNextTime">
                    <el-date-picker type="date"
                                    placeholder="下次跟进开始时间"
                                    value-format="yyyy-MM-dd"
                                    v-model="search.startNextTime" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :lg="4" :md="6">
                  <el-form-item  prop="endNextTime">
                    <el-date-picker type="date"
                                    placeholder="下次跟进结束时间"
                                    v-model="search.endNextTime"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="{disabledDate1}" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </template>
              <template  v-if="abnormalState == '2'">
                <el-col :lg="4" :md="6">
                  <el-form-item prop="dealUserName">
                    <el-input v-model="search.dealUserName" placeholder="处理人"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="4" :md="6">
                  <el-form-item  prop="startDealDate">
                    <el-date-picker type="date"
                                    placeholder="处理开始时间"
                                    value-format="yyyy-MM-dd"
                                    v-model="search.startDealDate" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :lg="4" :md="6">
                  <el-form-item prop="endDealDate">
                    <el-date-picker type="date"
                                    placeholder="处理结束时间"
                                    v-model="search.endDealDate"
                                    value-format="yyyy-MM-dd"
                                    :picker-options="{disabledDate2}" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </template>
            </div>
          </el-row>
        </el-form>
      </Portlet>
    </el-col>
    <el-col :span="24">
      <BasicTable
        ref="BasicTable"
        url="/ms-warehouse-order/orderAbnormal/getStoreAbnormalList"
        :tabs="tabs"
        :initParams="{time: search.time}"
        :columns="columns">
        <template slot="column">
          <el-table-column fixed="right" width="100px" align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="show(scope.row, state)"
              >
                <span>{{abnormalState == 1 ? '处理' : '详情'}}</span>
              </el-button>
            </template>
          </el-table-column>
        </template>
      </BasicTable>
    </el-col>
  </el-row>
</template>
<script>
import {copy} from '@/utils'
import {filterDataBaseDictionary, unixTimestampFilter} from '@/filters'
import moment from 'moment'
import {getAbnormalType, getSubDictListOfParentCode} from '@/utils/selectOptions'
// import Portlet from '@/components/base/Portlet'
// import {copy, dotData} from '@/utils'
export default {
  name: 'abnormalListIndex',
  data() {
    const that = this
    let columns = [
      {
        label: '异常流水号',
        width: '135',
        data: 'abnormalSerNo'
      },
      {
        label: '异常类型',
        data: 'abnormalType'
      },
      {
        label: '异常包件',
        data: 'abnormalPackNums'
      },
      {label: '库位', data: 'locationName'},
      {label: '商家名称', data: 'cargoOwnerName'},
      {label: '厂家名称', data: 'manuName'},
      {label: '所属产品', data: 'belongProduct'},
      {label: '包件编号', data: 'packNo'},
      {label: '包件名称', data: 'packName'},
      {label: '单位', data: 'packUnit'},
      {label: '发起人', data: 'founderName'},
      {
        label: '发起时间',
        width: '135',
        data: 'foundDate',
        render: (data, full) => {
          return unixTimestampFilter(data)
        }
      }
    ]
    let columns1 = copy(columns, true)
    columns1.splice(12, 0, {
      label: '跟进人',
      data: 'followUserName'
    },
    {
      label: '跟进内容',
      data: 'followType',
      render: (data, type, full, meta) => {
        return filterDataBaseDictionary(data)
      }
    },
    {
      label: '下次跟进日期',
      data: 'nextTime',
      render: (data, type, full, meta) => {
        return unixTimestampFilter(data, 'YYYY-MM-DD')
      }
    })
    let columns2 = copy(columns, true)
    columns2.splice(12, 0, {
      label: '处理人',
      data: 'dealUserName'
    }, {
      label: '处理时间',
      data: 'dealDate',
      render: (data, type, full, meta) => {
        return unixTimestampFilter(data, 'YYYY-MM-DD HH:mm')
      }
    })
    return {
      isOpen: false,
      abnormalState: '1',
      idArr: [],
      abnormalArr: [],
      followTypeArr: [],
      search: {
        abnormalSerNo: '',
        abnormalCode: '',
        locationName: '',
        cargoOwnerName: '',
        manuName: '',
        belongProduct: '',
        packNo: '',
        packName: '',
        startfoundDate: '',
        endfoundDate: '',
        followUserName: '',
        followType: '',
        startNextTime: '',
        endNextTime: '',
        dealUserName: '',
        startDealDate: '',
        endDealDate: '',
        founderName: ''
      },
      columns,
      tabs: [
        {
          label: '处理中',
          columns: columns1,
          callback: (params) => {
            params.abnormalState = '1'
            that.abnormalState = '1'
          }
        },
        {
          label: '已完成',
          columns: columns2,
          callback: (params) => {
            params.abnormalState = '2'
            that.abnormalState = '2'
          }
        }
      ],
      state: 0,
      searchLoading: false,
      typeArr: [],
      item: {}
    }
  },
  created() {
    getAbnormalType().then(arr => {
      this.abnormalArr = arr || []
    })
    getSubDictListOfParentCode('zhiyingOrderFollow').then(arr => {
      this.followTypeArr = arr || []
    })
  },
  methods: {
    // 搜索
    searchFunc(search) {
      const basicTable = this.$refs.BasicTable
      if (basicTable) {
        let params = copy(search)
        this.searchLoading = true
        basicTable.search(params).finally(_ => {
          this.searchLoading = false
        })
      }
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    // 表格刷新
    refresh() {
      this.searchFunc(this.search)
    },
    // 跳转详情
    show(data, state) {
      this.$router.push({path: '/ss-oms/abnormal/list/show/' + data.id + '/?locationPackId=' + data.locationPackId})
    },
    disabledDate(time) { // 发起时间
      return time.getTime() < moment(this.search.startfoundDate).format('x')
    },
    disabledDate1(time) { // 跟进时间
      return time.getTime() < moment(this.search.startNextTime).format('x')
    },
    disabledDate2(time) { // 处理时间
      return time.getTime() < moment(this.search.startDealDate).format('x')
    }
  }
}
</script>
